<template>
  <view class="container">
    <navbar title="发布" bgc="#347dfd" titleColor="white" :isShowIcon="false"></navbar>
    <view>
      <view class="header"></view>
      <view class="body">
        <view class="tabs" @click="onClickTabs">
          <text mark:info="4" :class="{active:tabsStatus =='4' }">车辆信息</text>
          <text mark:info="3" :class="{active:tabsStatus =='3' }">货源信息</text>
          <text mark:info="1" :class="{active:tabsStatus =='1' }">发散货</text>
          <text mark:info="2" :class="{active:tabsStatus =='2' }">拼散车</text>
        </view>
        <view class="content" style="margin-top: 20rpx;">
          <view class="item-box">
            <view class="item">
              <text>姓名</text>
              <view class="item-right">
                <input class="input" v-model="form.userName" type="text" placeholder="请输入姓名">
              </view>
            </view>

            <view class="item">
              <text>手机号码</text>
              <view class="item-right">
                <input class="input" v-model="form.phone" type="text" placeholder="请输入手机号码">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 4 ">
              <text>车辆照片</text>
              <view class="item-right">
                <view class="upload-image-box">
                  <view v-if="form.image.length" class="upload-image-left">
                    <view class="image" v-for="(item,index) in form.image" :key="index">
                      <view class="image-remove" @click="removePicture(index)">x</view>
                      <image class="image1" :src="baseUrl+item" mode=""></image>
                    </view>
                  </view>
                  <image @click="onChooseImage" v-if="form.image.length<=5" class="image"
                    src="/static/images/Group909@2x.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 4 || tabsStatus == 2">
              <text>车辆类型</text>
              <view class="item-right">
                <input class="input" v-model="form.carType" type="text" placeholder="请输入车辆类型">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 3 || tabsStatus == 1">
              <text>物品类型</text>
              <view class=" item-right">
                <input class="input" v-model="form.materialType" type="text" placeholder="请输入物品重量尺寸">
              </view>
            </view>
            <!-- <view class="item" v-if="tabsStatus == 2">
              <text>车辆类型</text>
              <view class="item-right">
                <input class="input" v-model="form.carType" type="text" placeholder="请输入车辆类型">
              </view>
            </view> -->
            <view class="item" v-if="tabsStatus == 3">
              <text>理想价格</text>
              <view class="item-right">
                <input class="input" v-model="form.idealPrice" type="text" placeholder="请输入理想价格">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 3 || tabsStatus == 1 || tabsStatus == 2">
              <text>出发地</text>
              <view class="item-right">
                <input class="input" v-model="form.departure" type="text" placeholder="请输入出发地">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 3 || tabsStatus == 1 || tabsStatus == 2">
              <text>目的地</text>
              <view class="item-right">
                <input class="input" v-model="form.destination" type="text" placeholder="请输入目的地">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 3">
              <text>车辆要求</text>
              <view class="item-right">
                <input class="input" v-model="form.carRequire" type="text" placeholder="请输入车辆要求">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 4">
              <text>能去的国家</text>
              <view class="item-right">
                <input class="input" v-model="form.crossCountry" type="text" placeholder="请输入能去的国家">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 4">
              <text>能去的城市</text>
              <view class="item-right">
                <input class="input" v-model="form.crossCity" type="text" placeholder="请输入能去的城市">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 4">
              <text>目前车辆所在地</text>
              <view class="item-right">
                <input class="input" v-model="form.carAddress" type="text" placeholder="请输入目前车辆所在地">
              </view>
            </view>
            <view class="item" v-if="tabsStatus == 2">
              <text>被运车辆数量</text>
              <view class="item-right">
                <input class="input" type="text" v-model="form.carNumber" placeholder="请输入被运车辆数量">
              </view>
            </view>
            <view class="item">
              <text>备注信息</text>
              <view class="item-right">
                <input class="input" v-model="form.remark" type="text" placeholder="请输入备注信息">
              </view>
            </view>
          </view>
        </view>
        <view class="footer" style="margin-top: 140rpx; margin-bottom: 140rpx;">
          <FooterBottom @onclick="submit" title="提交"></FooterBottom>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsStatus: '4',
        baseUrl: uni.gRequest.file,
        form: {
          type: '', //发布类型
          userName: '',
          phone: '', //手机号
          carType: '', //车辆类型
          materialType: '', //货物类型
          remark: '', //备注
          image: [], // 车辆照片
          idealPrice: '', //理想价格
          departure: '', //发货地
          destination: '', //目的地
          carRequire: '', //车辆要求
          crossCountry: '', //能去的国家
          crossCity: '', //能去的城市
          status: '3',
          carAddress: '',
          carNumber: ''
        }
      }
    },
    watch: {
      tabsStatus: {
        handler(newTab) {
          this.form.type = +newTab
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      // 选择图片
      async onChooseImage() {
        const res = await uni.chooseMedia({
          count: 1,
          mediaType: 'image',
        })
        // 调用 API 上传图片
        var userInfo = uni.getStorageSync('userInfo');
        wx.uploadFile({
          url: this.baseUrl + '/common/upload',
          filePath: res.tempFiles[0].tempFilePath,
          name: 'file',
          header: {
            Authorization: 'Bearer ' + userInfo.token,
          },
          success: (result) => {
            // 处理返回的 json 数据
            const data = JSON.parse(result.data)
            if (data.code !== 200) {
              return wx.showToast({
                icon: 'none',
                title: '上传图片失败!'
              })
            }
            this.form.image.push(data.fileName)
          }
        })

      },
      // 清除图片
      removePicture(i) {
        this.form.image.splice(i, 1)
      },
      onClickTabs(e) {
        this.tabsStatus = e.mark.info
        this.form = {
          type: this.form.type,
          userName: '',
          phone: '', //手机号
          carType: '', //车辆类型
          materialType: '', //货物类型
          remark: '', //备注
          image: [], // 车辆照片
          idealPrice: '', //理想价格
          departure: '', //发货地
          destination: '', //目的地
          carRequire: '', //车辆要求
          crossCountry: '', //能去的国家
          crossCity: '', //能去的城市
          status: '3'
        }
      },
      async submit() {
        const index = +this.tabsStatus
        let tempForm = {}
        if (index == 4) {
          const {
            type,
            userName,
            phone,
            image,
            carType,
            crossCountry,
            crossCity,
            remark,
            carAddress,
            status,
          } = this.form
          tempForm = {
            type,
            userName,
            phone,
            image,
            carType,
            crossCountry,
            crossCity,
            remark,
            status,
            carAddress
          }
        } else if (index == 3) {
          const {
            type,
            userName,
            phone,
            materialType,
            idealPrice,
            departure,
            destination,
            carRequire,
            remark,
            status
          } = this.form
          tempForm = {
            type,
            userName,
            phone,
            materialType,
            idealPrice,
            departure,
            destination,
            carRequire,
            remark,
            status
          }
        } else if (index == 1) {
          const {
            type,
            userName,
            phone,
            materialType,
            departure,
            destination,
            remark,
            status
          } = this.form
          tempForm = {
            type,
            userName,
            phone,
            materialType,
            departure,
            destination,
            remark,
            status
          }
        } else if (index == 2) {
          const {
            type,
            userName,
            phone,
            departure,
            destination,
            remark,
            status,
            carType,
            carNumber
          } = this.form
          tempForm = {
            type,
            userName,
            phone,
            departure,
            destination,
            remark,
            status,
            carType,
            carNumber
          }
        }
        if (Object.keys(tempForm).includes('image')) {
          let str = ''
          const temp = tempForm.image.forEach(item => {
            str = `${str},${item}`
          })
          str = str.slice(1)
          tempForm['image'] = str
        }
        for (const key in tempForm) {
          console.log(key, ':', tempForm[key]);
          if (!tempForm[key] && key != 'remark') return uni.showToast({
            title: '请完善表单',
            icon: 'none'
          })
        }
        const isPass = this.checkPhone()
        if (!isPass) {
          return uni.showToast({
            title: '请输入正确手机号',
            icon: 'none'
          })
        }
        const res = await uni.gRequest.post('/app/demand/add', tempForm)
        if (res.msg != '操作成功') return uni.showToast({
          title: '提交失败，请稍后重试！',
          icon: 'none'
        })
        if (res.msg == '操作成功') {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
        }
        this.form = {
          type: this.form.type,
          userName: '',
          phone: '', //手机号
          carType: '', //车辆类型
          materialType: '', //货物类型
          remark: '', //备注
          image: [], // 车辆照片
          idealPrice: '', //理想价格
          departure: '', //发货地
          destination: '', //目的地
          carRequire: '', //车辆要求
          crossCountry: '', //能去的国家
          crossCity: '', //能去的城市
          status: '3'
        }
      },

      // 校验手机号
      checkPhone() {
        return /^1[3-9](\d{9})$/.test(this.form.phone)
      }
    },
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {
    height: 100%;
  }

  .header {
    height: 240rpx;
    background-color: #347dfd;
  }

  .body {
    padding: 4rpx 30rpx 30rpx;
    margin-top: -50rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #FFF;
  }

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      padding: 20rpx 0;

      &.active {
        color: #347DFD;
        ;
      }
    }
  }

  .item-box {
    padding: 0 20rpx;
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #eee solid;
    padding: 34rpx 0;
    font-size: 28rpx;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    .item-right {
      margin: -34rpx 0;
      flex: 1;

      .upload-image-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .upload-image-left {
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }

        .image1 {
          width: 90rpx;
          height: 80rpx;
        }

        .image {
          width: 90rpx;
          height: 80rpx;
          margin-right: 10rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;

          // &:last-child {
          //   margin-right: 0;
          // }

          .image-remove {
            position: absolute;
            top: 0rpx;
            right: 2rpx;
            width: 20rpx;
            height: 24rpx;
            line-height: 20rpx;
            text-align: center;
            color: #fff;
            background-color: rgba($color: #000000, $alpha: .6);
            border-radius: 0 10rpx 0 10rpx;
            font-size: 16rpx;
          }
        }

      }


      .input {
        text-align: right;
        padding: 0 60rpx 0 40rpx;
      }
    }
  }
</style>
